<template>
  <!-- 领料单列表 -->
  <div>
    <van-pull-refresh v-model="refreshing" @refresh="requisitionRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="requisitionLoad"
      >
        <van-row class="card" v-for="(item,index) in requisitionList" :key="item.id">
          <div @click="showRequisitionDetail(item)" style="display:flex">
            <div style="width:80%">
              <van-cell
                :border="false"
                value-class="materialName textLeft"
                :value="item.applyCode"
              />
              <van-cell :border="false" value-class="code textLeft" :value="item.applyUserName" />
              <van-cell
                :border="false"
                value-class="storageCount textLeft"
                title-class="storageCount textLeft"
                :value="'已出库/总数：'+item.pass+'/'+item.mNumber"
              />
            </div>
            <div style="width:20%;display: flex">
              <van-cell
                :border="false"
                :value-class="getRequisitionStateStr(item)"
                :value="getRequisitionStateStr(item)"
                style="margin:auto;padding:0"
              />
            </div>
          </div>
        </van-row>
      </van-list>
    </van-pull-refresh>

    <van-popup class="selectPop" v-model="showSelectRequisition">
      <div style="display:flex;flex-direction:column;">
        <p class="selectTitle">选择出库</p>
        <van-divider :style="{height:'1px',background:'#BABABA'}" />
        <div
          v-for="(item,index) in selectRequisitionArray"
          class="selectDiv"
          :class="{bottomDivide:index!=selectRequisitionArray.length-1}"
          @click="selectRequisition(item)"
        >
          <div style="display:flex;justify-content: center;align-content: center;">
            <p class="selectP">{{item.applyCode}}</p>
          </div>
          <p class="selectP">{{item.applyUserName}}</p>
          <p class="selectP" :class="getRequisitionStateStr(item)">{{getRequisitionStateStr(item)}}</p>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import http from "@/utils/request";
import api from "@/utils/api";
import Toast from "@/utils/toast";
import consts from "@/utils/consts";
import { Divider } from "vant";

export default {
  name: "MaterialRequisition",
  props: ["keywords", "state"],
  data() {
    return {
      page: 0,
      pageSize: 10,
      totalCount: 0,
      pageCount: 0,
      order: "",

      requisitionList: [],
      loading: false,
      finished: false,
      refreshing: false,

      inProcess: this.$store.getters.inProcess,

      selectRequisitionArray: [],
      showSelectRequisition: false
    };
  },
  methods: {
    requisitionLoad() {
      console.log("requisitionLoad");
      this.loading = true;
      let param = {
        page: this.page + 1,
        pageSize: this.pageSize,
        applyUserName: this.keywords,
        // state:
        //   this.state == consts.allState
        //     ? consts.materialRequisitionAll
        //     : this.state
        state: 1
      };
      http
        .fetchGet(api.applyMaterials, param)
        .then(data => {
          if (!data.data || data.page >= data.pageCount) {
            this.finished = true;
          }
          this.page = data.page;

          this.requisitionList = this.requisitionList.concat(data.data);
          this.loading = false;
        })
        .catch(err => {
          this.loading = false;
          this.finished = true;
        });
    },
    requisitionRefresh(isSearch = false) {
      // this.barCodeScanOutRequisition("20190820000007");

      console.log("requisitionRefresh");
      this.page = 0;
      let param = {
        page: this.page + 1,
        pageSize: this.pageSize,
        applyUserName: this.keywords,
        state: 1
      };
      http
        .fetchGet(api.applyMaterials, param)
        .then(data => {
          if (!data.data || data.page >= data.pageCount) {
            this.finished = true;
          }
          this.page = data.page;
          this.requisitionList = data.data;

          this.refreshing = false;
          if (isSearch) {
            // Toast.success("检索成功");
          } else {
            Toast.toast("刷新成功");
          }
        })
        .catch(err => {
          this.refreshing = false;
          this.finished = true;
        });
    },
    showRequisitionDetail(requisition) {
      // let requisition = this.requisitionList[index];
      this.$router.push({
        path: "/outOfStorageList",
        query: {
          applyCode: requisition.applyCode
          // barCode: barCode
        }
      });
      this.barCode = null;
    },
    selectRequisition(requisition, barCode = this.barCode) {
      this.$router.push({
        path: "/outOfStorageList",
        query: {
          applyCode: requisition.applyCode,
          barCode: barCode
        }
      });
      this.barCode = null;
    },
    getRequisitionStateStr(item) {
      if (this.inProcess) {
        const index = this.inProcess.indexOf(item.applyCode);
        if (index != -1) {
          return "处理中";
        }
      }
      if (item.state == 1) {
        return "待处理";
      } else if (item.state == 2) {
        return "待审批";
      } else if (item.state == 3) {
        return "已完成";
      }
    },
    barCodeScanOutRequisition(code) {
      const param = { bar: code };
      http
        .fetchGet(api.getOutBarStorageSubs, param)
        .then(data => {
          data = data.data;
          if (data.length == 1) {
            this.showRequisitionDetail(data[0], code);
          } else if (data.length > 1) {
            this.barCode = code;
            this.selectRequisitionArray = data;
            this.showSelectRequisition = true;
          } else if (data.length == 0) {
            Toast.toast("没有对应的出库单", false);
          }
        })
        .catch(err => {});
    }
  },
  watch: {
    keywords() {
      this.requisitionRefresh(true);
    },
    state() {
      this.requisitionRefresh(true);
      // this.filterData();
    }
  },
  created() {
    window.barCodeScanOutRequisition = this.barCodeScanOutRequisition;
  },
  beforeDestroy() {
    window.barCodeScanOutRequisition = null;
  }
};
</script>

<style lang="scss" scoped>
// @import "../styles/common.scss";
.card {
  // border-width: 0 0 1px 0;
  // border-style: solid;
  // border-color: #cccccc;
  // margin-left: 5px;
  // margin-right: 5px;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
  margin-bottom: 10px;
  background-color: white;
  width: auto;
  padding: 14px 16px 14px 16px;
}

.van-cell {
  padding: 0;
}
/* 物料名称 */
.materialName {
  // font-weight: 800;
  // font-size: 20px;
  color: black;
  display: block;
  font-size: 26px;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  color: rgba(51, 51, 51, 1);
  line-height: 37px;
  letter-spacing: 1px;
}

// 编号
.code {
  // font-weight: 600;
  // font-size: 15px;
  color: black;
  display: block;
  font-size: 22px;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  color: rgba(102, 102, 102, 1);
  line-height: 30px;
  letter-spacing: 1px;
}

/* 领取数/出库数 */
.storageCount {
  // font-weight: 600;
  // font-size: 15px;
  display: block;
  font-size: 22px;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  color: rgba(153, 153, 153, 1);
  line-height: 30px;
  letter-spacing: 1px;
}

.textLeft {
  text-align: left;
}

.selectPop {
  width: 400px;
  height: auto;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.24);
  border-radius: 8px;
  padding: 15px;
}

.selectTitle {
  font-size: 24px;
  font-family: PingFangSC-Regular, PingFangSC;
  font-weight: 400;
  color: rgba(102, 102, 102, 1);
  line-height: 33px;
  letter-spacing: 1px;
  margin-bottom: 15px;
  margin-top: 0;
  margin-left: 0;
  margin-right: 0;
}

.selectDiv {
  height: 68px;
  display: flex;
  justify-content: center;
  align-content: center;
}

.bottomDivide {
  border-bottom: 1px solid #bababa;
}

.selectP {
  flex: auto;
  font-size: 22px;
  font-family: PingFangSC-Regular, PingFangSC;
  font-weight: 400;
  color: rgba(102, 102, 102, 1);
  line-height: 33px;
  letter-spacing: 1px;
  margin: auto;
}

.待处理 {
  // color: #f5943c;
  text-align: center;
  font-size: 22px;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  color: rgba(245, 148, 60, 1);
  line-height: 30px;
  letter-spacing: 1px;
}
.处理中,
.待审批 {
  // color: #477cec;
  text-align: center;
  font-size: 22px;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  color: rgba(71, 124, 236, 1);
  line-height: 30px;
  letter-spacing: 1px;
}
.已完成 {
  // color: #75de3c;
  text-align: center;
  font-size: 22px;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  color: rgba(117, 222, 60, 1);
  line-height: 30px;
  letter-spacing: 1px;
}
</style>

